<template>
  <div class="matts">
    <ul class="list">
      <li
        v-for="(item, index) of data"
        :key="index"
      >
        <span>
          <p class="num">
            <i>{{item.sum}}</i>
            {{item.unit}}
          </p>
          <p class="sub">{{item.subText}}</p>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'matts',
  props: {
    'data': {
      type: Array,
      default: [
        {
          unit: '家',
          subText: '全市园所总数',
          sum: 0
        },
        {
          unit: '人',
          subText: '园长总数',
          sum: 0
        },
        {
          unit: '人',
          subText: '在职教师总数',
          sum: 0
        },
        {
          unit: '万人',
          subText: '在园儿童总数',
          sum: 0
        }
      ]
    }
  },
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .matts
    width: 100%
    height: 100%
    box-sizing: border-box
    padding: 20px
    ul
      width: 100%
      height: 100%
      li
        float: left
        width: 50%
        height: 50%
        box-sizing: border-box
        padding: 10px
        text-shadow: 0 2px 10px rgba(0, 0, 0, .3)
        span:before, span:after
          content: ''
          position: absolute
          left: 0
          top: -1px
          width: 25px
          height: 100%
          border-radius: 4px 0 0 4px
          border-top: 1px solid #2f8ae6
        span:after
          left: auto
          right: 0
          top: 0
          border-radius: 0 4px 4px 0
        span
          display: table
          position: relative
          width: 100%
          height: 100%
          border-radius: 4px
          border: 1px solid #2f8ae6
          border-top: none
          background: linear-gradient(to right, rgba(20, 49, 123, .8) 0%, rgba(26, 123, 191, .8) 100%)
          .num
            display: table-cell
            vertical-align: middle
            text-align: center
            color: #12ffc1
            i
              font-size: 24px
          .sub
            position: absolute
            top: -6px
            left: 0
            width: 100%
            text-align: center
            font-size: 12px
</style>
